<script lang="ts" setup>
import { ref, h, onBeforeMount, nextTick, reactive } from "vue";
import { VxeModalInstance } from "vxe-pc-ui";
import { regenerateDeptId } from '@/api/client/client'
import { riskgetInfo,whiteAdd } from '@/api/warning/warning'
import type { FormInstance, FormRules } from 'element-plus'
const emits = defineEmits<{ (e: "reload"): void }>();
const vxeModalRef = ref<VxeModalInstance>();
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const modalOptions = reactive<{
  modalValue: boolean;
  modalTitle: string;
  canSubmit: boolean;
}>({
  modalValue: false,
  modalTitle: "",
  canSubmit: true
});

const showModal = (title: string, canSubmit?: boolean): void => {
  modalOptions.modalTitle = title;
  modalOptions.modalValue = true;
  modalOptions.canSubmit = canSubmit ?? true;
};
const detail = ref("");
const showAddModal = (id:number) => {
  showModal(`风险信息详情`);
  nextTick(() => {
    // formRef.value.clearValidate();
    riskgetInfo(id).then((res: any) => {
      detail.value = res.data;
    })
  });
};

const submitForm = async (formEl: FormInstance | undefined) => {
  whiteAdd({ merchantsInfoId: detail.value.merchantsInfoId }).then((res: any) => {
    ElMessage.success('移入成功！')
    detail.value.isRiskWhite = 1;
  })
}
onBeforeMount(() => {
  
});
// 表单
const ruleFormRef = ref<FormInstance>()
interface formOptions {
  deptId: string | number;//代理
  startDate: string;//日期
  branchName: string;
}
const form = reactive<formOptions>({
 deptId: '',
 branchName: '',
 startDate: '',
});
const rules = reactive<FormRules<formOptions>>({
  deptId: [
    { required: true, message: '请选择代理', trigger: 'blur' },
  ],
  startDate: [
    { required: true, message: '请选择账单周期', trigger: 'change' },
  ],
})

const tonext = () => {
  router.push({
    path: '/grant/record'
  })
}

defineExpose({ showAddModal });
</script>
<template>
  <vxe-modal
    ref="vxeModalRef"
    v-model="modalOptions.modalValue"
    width="600"
    showFooter
    :title="modalOptions.modalTitle"
  >
    <template #default>
      <el-form ref="ruleFormRef" label-width="100px">
          <el-col :span="19" >
            <el-form-item label="商户名称">
              {{ detail?.merchantsInfoIdDisplay }}
            </el-form-item>
            <el-form-item label="风险类型">
              {{ detail?.typeDisplay }}
            </el-form-item>
            <el-form-item label="充值行为">
              
            </el-form-item>
            <el-form-item label="下发批次">
              <div v-if="detail != ''" class="flex-1">
                <div v-for="(item,index) in detail?.batchNumberList" :key="index">{{ item }}</div>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-button @click="tonext" type="primary">
                  查看相应批次
                </el-button>
            </el-form-item>
          </el-col>
          <el-col :span="19" :offset="63">
            <el-form-item label="">
              <div class="mt-6">
                <el-button @click="modalOptions.modalValue = false">关闭</el-button>
                <el-button :disabled="detail?.isRiskWhite == 1 ? true : false" @click="submitForm(ruleFormRef)" type="primary">
                  移入白名单
                </el-button>
              </div>
            </el-form-item>
          </el-col>
      </el-form>
    </template>
    <!-- <template #footer>
      <vxe-button content="关闭" @click="modalOptions.modalValue = false" />
      <vxe-button
        v-if="modalOptions.canSubmit"
        status="primary"
        content="确定"
        @click="handleSubmit"
      />
    </template> -->
  </vxe-modal>
</template>
